<template>
  <div>
    <van-field
      readonly
      clickable
      :value="vModelValue"
      :name="name"
      :label="label"
      :required="required"
      :rules="required ? rules : []"
      :placeholder="placeholder ? placeholder : '请选择' + label"
      right-icon="arrow-down"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-cascader
        v-model="vModelValue"
        title="请选择派出所"
        :options="options"
        :field-names="{ text: 'label', value: 'id', children: 'children' }"
        @close="showPicker = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
import formMixin from './mixin'

export default {
  name: 'FormCascaderPCS',
  mixins: [formMixin],
  props: {
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPicker: false,
      options: [],
      selectData: {}
    }
  },
  computed: {
    vModelValue: {
      get() {
        return this.selectData?.label ?? ''
      },
      set(val) {
        this.$emit('change', val)
      }
    }
  },
  created() {
    this.loadAllPcs()
  },
  methods: {
    onFinish({ selectedOptions }) {
      if (selectedOptions.length) {
        this.selectData = selectedOptions[selectedOptions.length - 1]
        this.vModelValue = this.selectData.id
      }
      this.showPicker = false
    },
    async loadAllPcs() {
      try {
        const { data } = await Promise.resolve([])
        this.options = data
      } catch (error) {
        console.error('error =>', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-radio {
  margin-top: 10px;
}

/deep/ {
  .van-radio__label {
    transition: color 0.5s;
  }
  .van-radio__icon--checked {
    & + .van-radio__label {
      color: #1989fa;
    }
  }
}
</style>
